Ext.ns('okcapital.widgets.MazlowUtil');

/**
 * Util function - returns an array of sprite configs
 * level - [0, 4] with 0 being the bottom level, 4 being the top
 * rating - [0, 1] how well rated this sprite is
 */
okcapital.widgets.MazlowUtil.generateMazlowSprites = function(level, rating, onclick, onmouseover) {
	var width = (okcapital.widgets.MazlowUtil.mazlowLevels - level - 1) * 120;
	var height = 80;
	var x = level * 60;
	var y = 400 - ((level + 1) * 80);
	var font = '22px Arial';
	var fontWidth = 6;
	var fontHeight = 8;
	var opacity = 0.6;
	
	var text = okcapital.widgets.MazlowUtil.mazlowNames[level];
	
	//Funky maths to spill transparency into triangles (ugh)
	var widthWithTriangles = width + 120;
	var leftTriangleOpaqueWidth = 60;
	var rightTriangleOpaqueWidth = 60;
	var rectangleOpaqueWidth = width;
	if (rating !== null && rating !== undefined) {
		var opaquePixels = Math.floor(rating * widthWithTriangles);
		
		leftTriangleOpaqueWidth = (opaquePixels >= 60) ? 60 : opaquePixels;
		rectangleOpaqueWidth = ((opaquePixels - 60) >= width) ? width : (opaquePixels - 60);
		if (rectangleOpaqueWidth < 0) {
			rectangleOpaqueWidth = 0;
		}
		rightTriangleOpaqueWidth = ((opaquePixels - 60 - width) >= 60) ? 60  : (opaquePixels - 60 - width);
		if (rightTriangleOpaqueWidth < 0) {
			rightTriangleOpaqueWidth = 0;
		}
		
		text += ' ' + Math.floor(rating * 100) + '%';
	}
	
	var transparentSprites =  [{
		type : 'path',
		path : Ext.util.Format.format('M {0} {1} L {2} {3} L {4} {5} z', x, y + height, x + 60, y, x + 60, y + height),//'M 100 100 L 300 100 L 200 300 z',
		fill : okcapital.widgets.MazlowUtil.mazlowFill[level],
		opacity : opacity,
		listeners : {
			mouseover : onmouseover,
			click : onclick
		}
	},{
		type : 'rect',
		x : x + 60,
		y : y,
		_mazlowLevel : level,
		width : width,
		opacity : opacity,
		height : height,
		fill : okcapital.widgets.MazlowUtil.mazlowFill[level],
		listeners : {
			mouseover : onmouseover,
			click : onclick
		}
	},{
		type : 'path',
		path : Ext.util.Format.format('M {0} {1} L {2} {3} L {4} {5} z', x + width + 60, y, x + width + 60, y + height, x + width + 120, y + height),//'M 100 100 L 300 100 L 200 300 z',
		fill : okcapital.widgets.MazlowUtil.mazlowFill[level],
		opacity : opacity,
		listeners : {
			mouseover : onmouseover,
			click : onclick
		}
	}];
	
	var degToRad = function(x) {
		return x / 180 * Math.PI;
	};
	
	var lowerAngle = 53.13010235415599;
	var upperAngle = 180 - lowerAngle - 90;
	var opaqueSprites = [];
	if (leftTriangleOpaqueWidth > 0) {
		var ratio = leftTriangleOpaqueWidth / Math.sin(degToRad(upperAngle));
		var triangleHeight = ratio * Math.sin(degToRad(lowerAngle));
		
		opaqueSprites.push({
			type : 'path',
			path : Ext.util.Format.format('M {0} {1} L {2} {3} L {4} {5} z', x, y + height, x + leftTriangleOpaqueWidth, y + height, x + leftTriangleOpaqueWidth, y + height - triangleHeight),//'M 100 100 L 300 100 L 200 300 z',
			fill : okcapital.widgets.MazlowUtil.mazlowFill[level],
			listeners : {
				mouseover : onmouseover,
				click : onclick
			}
		});
	}
	
	if (rectangleOpaqueWidth > 0) {
		opaqueSprites.push({
			type : 'rect',
			x : x + 60,
			y : y,
			_mazlowLevel : level,
			width : rectangleOpaqueWidth,
			height : height,
			fill : okcapital.widgets.MazlowUtil.mazlowFill[level],
			listeners : {
				mouseover : onmouseover,
				click : onclick
			}
		});
	}
	
	if (rightTriangleOpaqueWidth > 0) {
		var ratio = (60 - rightTriangleOpaqueWidth) / Math.sin(degToRad(upperAngle));
		var triangleHeight = ratio * Math.sin(degToRad(lowerAngle));
		
		opaqueSprites.push({
			type : 'path',
			path : Ext.util.Format.format('M {0} {1} L {2} {3} L {4} {5} L {6} {7} z', 
					x + width + 60,  y, 
					x + width + 60,  y + height, 
					x + width + 60 + rightTriangleOpaqueWidth, y + height,
					x + width + 60 + rightTriangleOpaqueWidth, y + height - triangleHeight),//'M 100 100 L 300 100 L 200 300 z',
			fill : okcapital.widgets.MazlowUtil.mazlowFill[level],
			listeners : {
				mouseover : onmouseover,
				click : onclick
			}
		});
	}
	
	var text = [{
		type : 'text',
		font : font,
		_mazlowLevel : level,
		x : x + (width / 2) + 60 - (text.length * fontWidth),
		y : y + (height / 2) - fontHeight,
		width : fontWidth * name.length,
		height : fontHeight,
		text : text
	}];
	
	return transparentSprites.concat(opaqueSprites.concat(text));
};

okcapital.widgets.MazlowUtil.mazlowLevels = 5;
okcapital.widgets.MazlowUtil.mazlowWeights = [0.4, 0.3, 0.15, 0.1, 0.05];
okcapital.widgets.MazlowUtil.mazlowNames = ['Physiological', 'Safety', 'Love/Belonging', 'Esteem', 'Self'];
okcapital.widgets.MazlowUtil.mazlowFill = ['#E69E00', '#F72331', '#009995', '#801DE1', '#3B5998'];
